import { Table, Space } from 'antd'
import {useHistory} from 'react-router-dom'
import './style.scss'





export default props => {
  const history = useHistory()  

  const GoodEdit = (e)=>{
    history.push('/good/destail/'+e._id)
  }
  const columns = [
    {
      title: '商品',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
      width: 120,
      render: (text, row)=>(
        <div className='img'>
          <img src={'http://localhost:8888'+row.img} alt=""/>
          <div>{row.name}</div>
        </div>
      )
    },
    {
      title: '价格',
      dataIndex: 'price',
      align: 'center',
      key: 'price',
    },
    {
      title: '描述',
      dataIndex: 'desc',
      align: 'center',
      key: 'desc',

    },
    {
      title: '状态',
      dataIndex: 'status',
      align: 'center',
      key: 'status',
      render:(text)=>{
        return(
          <div>{text?'正常':'已下架'}</div>
        )
      }
    },
    {
      title: '是否热销',
      dataIndex: 'hot',
      align: 'center',
      key: 'hot',
      render:(text)=>{
        return(
          <div>{text?'是':"否"}</div>
        )
      }
    },
    {
      title: '品类',
      dataIndex: 'cate',
      align: 'center',
      key: 'cate_zh',
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      render: (text, row) => (
        <Space size="middle">
          <a onClick={()=>{GoodEdit(row)}}>编辑</a>
        </Space>
      )
    }
  ]



  let {
    data,
    rows,  // 被选中的行，是数组
    total,
    rowsChange , // 当选中行发生变化时，向父组件通信
    onChange
  } = props

  const rowSelection = {
    selectedRowKeys: rows,
    onChange: rowsChange,
    selections: false
  }
  

  return (
    <div className='qf-table'>
      <Table
        rowKey={'_id'}
        columns={columns}
        dataSource={data}
        pagination={{
          total,
          defaultPageSize:2,
          onChange,
          pageSizeOptions:[2,5,10],
          showSizeChanger:true,
          showTotal:t=>(<div>总共有{t}条数据</div>),
          showQuickJumper:true
        }}
        scroll={{
          scrollToFirstRowOnChange:true,
          y:300
        }}
        rowSelection={rowSelection}
      />
    </div>
  )
}
